<template>
  <view class="content">
    <view class="customNavBar">
      <view class="navbar">
        <view :style="{ height: getStatusBarHeight() + 'px' }" class="statusBar"></view>
        <!-- 标题栏 -->
        <view class="titleBar" style="height: 120rpx">
          <view class="barLeft" @tap="showDrawer('showLeft')">
            <image
              :src="store._state.data.user.avatar ? store._state.data.user.avatar : morenAvatar"
              class="cu-avatar xl square"
              style="width: 72rpx; height: 72rpx"
            ></image>

            <p
              style="
                color: #1d2129;
                text-align: center;
                font-size: 40rpx;
                font-style: normal;
                font-weight: 500;
                line-height: 56rpx;
                margin-left: 16rpx;
              "
            >
              {{ userName ? userName : '暂未登录' }}
            </p>
          </view>
          <view class="rightBar">
            <!--            <i class="iconfont icon-sousuo"></i>-->
          </view>
        </view>
        <view :style="`height:calc(100vh - ${tabBarHeight + 60}px)`" class="home-content">
          <uni-swipe-action>
            <uni-swipe-action-item v-for="(item, index) in cardData" :key="index">
              <template v-slot:right>
                <view class="topUpBtn">
                  <iconpark-icon :size="rpxTopx(40)" fill="#fff" name="to-top"></iconpark-icon>
                  <text> 置顶</text>
                </view>
                <view class="deleteBtn">
                  <iconpark-icon :size="rpxTopx(40)" fill="#fff" name="delete"></iconpark-icon>
                  <text> 删除</text>
                </view>
              </template>
              <view class="msg-list" @tap="gotoNewPage(item.title)">
                <view class="list-left">
                  <uni-badge
                    :offset="[10, 5]"
                    :text="item.num"
                    absolute="rightTop"
                    class="uni-badge-left-margin"
                    size="small"
                  >
                    <image class="image" :src="item.imgUrl"></image>
                  </uni-badge>

                  <view class="list-right">
                    <view class="msg-type-author">
                      <h4>{{ item.title }}</h4>
                      <p :class="item.infoType">{{ item.infoType }}</p>
                    </view>
                    <text>{{ item.infoMsg }}</text>
                  </view>
                </view>
                <p class="time-txt">{{ item.time }}</p>
              </view>
            </uni-swipe-action-item>
          </uni-swipe-action>
        </view>
      </view>
    </view>
    <uni-drawer ref="showLeft" mode="left">
      <view class="setting-box">
        <view :style="{ height: getStatusBarHeight() + 'px' }" class="statusBar"></view>

        <uni-card
          v-if="store._state.data.user.avatar"
          :border="false"
          :is-full="true"
          :is-shadow="false"
          :sub-title="userPostGroup"
          :thumbnail="store._state.data.user.avatar"
          :title="userName"
          @tap="goUpdataUserAvatar"
        />
        <input
          v-model="userInfoName"
          class="uni-input"
          placeholder="输入你的个性签名..."
          @blur="blurInfo"
        />

        <uni-list :border="false">
          <uni-list-item v-for="(item, index) in settingList" :key="index" :border="false">
            <template v-slot:header>
              <view
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  margin-right: 8rpx;
                "
                @tap="settingListClick(item.listName)"
              >
                <iconpark-icon :name="item.name" :size="rpxTopx(40)"></iconpark-icon>
              </view>
            </template>

            <template v-slot:body>
              <view style="width: 100%" @tap="settingListClick(item.listName)"
                >{{ item.listName }}
              </view>
            </template>
          </uni-list-item>
        </uni-list>
        <view class="cu-list menu">
          <view class="cu-item item-box">
            <view class="content text-center" @click="handleLogout">
              <text class="text-black"> {{ userName ? '退出登录' : '去登录' }}</text>
            </view>
          </view>
        </view>
      </view>
    </uni-drawer>
  </view>

  <!-- 自定义 tabBar -->
  <custom-tabbar :currentIndex="0" />
</template>

<script setup>
import CustomTabbar from '@/components/customTabbar/custom-tabbar.vue'
import { getStatusBarHeight } from '@/utils/system.js'

import { getUserProfile, updateUserProfile } from '@/api/system/user.js'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { nextTick, ref } from 'vue'
import { rpxTopx } from '@/hook/convertUnit'
import dayjs from 'dayjs'
import weizhi from '@/static/images/work/Frame 14.png'
import bangzhu from '@/static/images/work/Frame 11.png'
import morenAvatar from '@/static/images/morenAvatar.png'
import modal from '@/plugins/modal'
import store from '@/store'
import { addAttendance, getAttendanceRecordList, getSelectApproveList } from '@/api/attendance'
import { getNewVersionApi } from '@/api/login'
import { useDeviceId } from '@/utils/getInitDeviceId'
import { findNewElements } from '@/utils/NumberBadges'
// 抽屉的实例
let userAvatar = ref('')
let userName = ref('')
let userPostGroup = ref('')
let userInfoName = ref('')
const currentIndex = ref(0)
const showLeft = ref(null)
let userIdAttendabce = ref(null) // 用户
let deptAttendabceZhenZhou = ref(null) // 部门
const systemInfo = uni.getSystemInfoSync()
const isAndroid = systemInfo.platform.toLowerCase() === 'android'
// 获取设备ID
const { deviceId, isReady: deviceIdReady, isError: deviceIdError } = useDeviceId()
const blurInfo = async () => {
  let params = {
    info: userInfoName.value
  }
  await updateUserProfile(params)
}
const versionApp = ref(null)
// 新疆
let userIdAttendabceArr = [82] // 罗平
// 郑州
let deptAttendabce = [8253, 6707, 6708, 8254, 6701, 6702, 6703, 6704, 8255, 8256, 8242] // 8242郑州部门id
// 郑州郑州绿地之窗景峰座1号楼打卡
let cxyuserIdAttendabceArr = [147, 106, 108, 99, 163, 97] // 郑州郑州绿地之窗景峰座1号楼打卡
// 滑动数据
let cardData = ref([
  {
    imgUrl: weizhi,
    title: '假勤',
    infoType: '机器人',
    infoMsg: '快速打卡',
    time: dayjs().format('HH:mm')
  },
  {
    imgUrl: bangzhu,
    title: '审批',
    infoType: '机器人',
    infoMsg: '审批中心',
    time: dayjs().format('HH:mm'),
    num: 0
  }
  // {
  //   imgUrl: renwu,
  //   title: '任务助手',
  //   infoType: '机器人',
  //   infoMsg: '近期待处理的任务',
  //   time: '10月26日',
  // },
  //
  // {
  //   imgUrl: zhou,
  //   title: '周报',
  //   infoType: '绩效考核',
  //   infoMsg: '缺卡提醒',
  //   time: '09:36',
  // },
  // {
  //   imgUrl: yue,
  //   title: '月报',
  //   infoType: '绩效考核',
  //   infoMsg: '缺卡提醒',
  //   time: '09:36',
  // },
  // {
  //   imgUrl: banghzu,
  //   title: '帮助中心',
  //   infoType: '应用',
  //   infoMsg: '简单几步，快速上手',
  //   time: '09:36',
  // },
  // {
  //   imgUrl: gonggao,
  //   title: '公告',
  //   infoType: '金圣龙',
  //   infoMsg: '金圣龙企业通知',
  //   time: '09:36',
  // },
])

const goUpdataUserAvatar = () => {
  uni.navigateTo({
    url: '/pages/mine/avatar/index'
  })
}
// 设置列表
let settingList = [
  {
    name: 'safe',
    listName: '账号与安全'
  },
  {
    name: 'edit',
    listName: '编辑资料'
  },

  // {
  //   name: 'settings',
  //   listName: '收藏',
  // },
  {
    name: 'bulb',
    listName: '帮助与反馈'
  },
  {
    name: 'plus-circle',
    listName: `版本号:${uni.getSystemInfoSync().appVersion}(${isAndroid ? '安卓' : '苹果'})`
  }
  // {
  //   name: 'star',
  //   listName: '设置',
  // },
]

// 去登陆
const goLogin = (v) => {
  if (v) return
  uni.navigateTo({
    url: '/pages/login'
  })
}
const showDrawer = () => {
  showLeft.value.open()
}
// 跳转到加勤
const gotoNewPage = (title) => {
  if (title === '假勤') {
    uni.navigateTo({
      url: '/pages/attendance/attendancePage'
    })
    // uni.navigateTo({
    //   url: '/pages/attendanceMessage/attendanceMessagePage',
    // })
  } else if (title === '审批') {
    uni.navigateTo({
      url: '/pages/audit/index?id=1'
    })
  }
}
// 卡片详情
const goCardDetail = () => {
}
const getUserProfileFn = async () => {
  let { code, data, postGroup } = await getUserProfile()
  if (code === 200) {

    userAvatar.value = data.avatar
    userName.value = data.nickName
    userInfoName.value = data.info
    userPostGroup.value = postGroup
    deptAttendabceZhenZhou.value = data.deptId
    userIdAttendabce.value = data.userId // 用户
  }
}
const handleLogout = () => {
  if (userName.value) {
    modal.confirm('确定注销并退出系统吗？').then(() => {
      store.dispatch('LogOut').then(() => {
        uni.reLaunch({
          url: '/pages/login'
        })
      })
    })
  } else {
    uni.reLaunch({
      url: '/pages/login'
    })
  }
}
const settingListClick = (title) => {
  switch (title) {
    case '账号与安全':
      uni.navigateTo({
        url: '/pages/mine/info/index'
      })
      break
    case '编辑资料':
      uni.navigateTo({
        url: '/pages/mine/info/edit'
      })
      break
    case '收藏':
      uni.navigateTo({
        url: '/pages/kongbai'
      })
      break
    case '帮助与反馈':
      uni.navigateTo({
        url: '/pages/mine/help/index'
      })
      break
    case '设置':
      uni.navigateTo({
        url: '/pages/mine/setting/index'
      })
      break
  }
}

let tabBarHeight = ref(0) // 导航栏的高度

const location = ref({
  lat: 0,
  lng: 0
})

//进行经纬度转换为距离的计算
function Rad(d) {
  return (d * Math.PI) / 180.0 //经纬度转换成三角函数中度分表形式。
}

//计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
const GetDistance = (lat1, lng1, lat2, lng2) => {
  const radLat1 = Rad(lat1)
  const radLat2 = Rad(lat2)
  const a = radLat1 - radLat2
  const b = Rad(lng1) - Rad(lng2)
  const s =
    2 *
    Math.asin(
      Math.sqrt(
        Math.pow(Math.sin(a / 2), 2) +
        Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)
      )
    )
  return s * 6378.137 // 返回公里数
}
const getWeek = () => {
  let datas = dayjs().day()
  let week = ['日', '一', '二', '三', '四', '五', '六']
  return '星期' + week[datas]
}
//上下班打卡时间
//上下班打卡时间
const time1 = ref(null)
const time2 = ref(null)
const time3 = ref(null)
const time4 = ref(null)
const timeFn = () => {
  // 新疆打卡
  if (userIdAttendabceArr.includes(userIdAttendabce.value)) {
    time1.value = dayjs().hour(8).minute(0).second(59)
    time2.value = dayjs().hour(12).minute(30).second(0)
    time3.value = dayjs().hour(14).minute(30).second(59)
    time4.value = dayjs().hour(19).minute(0).second(0)
  } else if (deptAttendabce.includes(deptAttendabceZhenZhou.value)) {
    // 郑州打卡
    if (getWeek() === '星期一') {
      time1.value = dayjs().hour(7).minute(50).second(59)
    } else {
      time1.value = dayjs().hour(8).minute(30).second(59)
    }
    time2.value = dayjs().hour(12).minute(0).second(0)
    time3.value = dayjs().hour(14).minute(0).second(59)
    time4.value = dayjs().hour(18).minute(30).second(0)
  } else if (cxyuserIdAttendabceArr.includes(deptAttendabceZhenZhou.value)) {
    // 郑州打卡
    if (getWeek() === '星期一') {
      time1.value = dayjs().hour(7).minute(50).second(59)
    } else {
      time1.value = dayjs().hour(9).minute(0).second(59)
    }
    time2.value = dayjs().hour(12).minute(0).second(0)
    time3.value = dayjs().hour(14).minute(0).second(59)
    time4.value = dayjs().hour(19).minute(0).second(0)
  } else {
    //上下班打卡时间
    if (getWeek() === '星期一') {
      time1.value = dayjs().hour(7).minute(50).second(59)
    } else {
      time1.value = dayjs().hour(8).minute(0).second(59)
    }
    time2.value = dayjs().hour(12).minute(0).second(0)
    time3.value = dayjs().hour(14).minute(30).second(59)
    time4.value = dayjs().hour(18).minute(30).second(0)
  }
}
const locationList = ref([
  { lat: 32.996571, lng: 112.567469 }, // 鑫源
  { lat: 32.128963, lng: 114.131159 }, // 信仰
  { lat: 33.040452, lng: 112.531317 }, // 南阳市卧龙区冯楼黄羽种鸡场
  { lat: 32.991163, lng: 114.012867 }, // 开发区金河办事处东高社区卫生服务站
  { lat: 32.651956, lng: 112.129627 }, // 邓州市产业孵化园
  { lat: 34.725066, lng: 113.738231 }, // 郑州大宇颐园
  { lat: 34.748717, lng: 113.675351 }, // 郁金香苑
  { lat: 32.998095, lng: 112.599547 }, // 花境公园
  { lat: 34.760549, lng: 113.770115 } // 郑州绿地之窗景峰座1号楼
])

const attendanceRecordList = ref([])
const checkValidLocation = (currentLat, currentLng) => {
  return locationList.value.some((item) => {
    const distance = GetDistance(currentLat, currentLng, item.lat, item.lng)
    return distance <= 0.8
  })
}

const autoPunch = async (data) => {
  // 获取当前的时间
  const currentTime = dayjs()
  // const currentTime = dayjs('2025-06-05 23:58:01')
  let listParams = {
    userId: data.userId,
    deptId: data.deptId,
    punchTimeLte: new dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
    punchTimeGte: new dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
    punchType: null
  }

  let params = {
    punchType: null, // 打卡类型
    type: '正常', // 打卡状态
    locationLatitude: location.value.lat,
    locationLongitude: location.value.lng,
    userId: data.userId,
    deptId: data.deptId,
    deviceCode: deviceId.value
  }

  attendanceRecordList.value = (await getAttendanceRecordList(listParams)).rows
  const isValidLocation = checkValidLocation(location.value.lat, location.value.lng)
  if (
    dayjs().startOf('day').valueOf() < currentTime.valueOf() &&
    currentTime.valueOf() < dayjs(time1.value).valueOf()
  ) {
    listParams.punchType = '上午上班'
    params.punchType = '上午上班'
    if (attendanceRecordList.value.filter(v => v.punchType === '上午上班').length === 0) {
      console.log('自动打卡成功', params)
      if (isValidLocation) {
        if (params.punchType) {
          const { code } = await addAttendance(params)
          if (code === 200) {
            uni.showToast({
              title: '自动打卡成功',
              icon: 'success',
              duration: 2000
            })
          }
        }
      } else {
        console.log('不在打卡范围内')
      }
    }
  } else if (
    currentTime.valueOf() > dayjs(time2.value).valueOf() &&
    currentTime.valueOf() < dayjs().hour(13).minute(15).second(0).millisecond(0).valueOf()
  ) {
    listParams.punchType = '上午下班'
    params.punchType = '上午下班'
    if (attendanceRecordList.value.filter(v => v.punchType === '上午下班').length === 0) {
      if (isValidLocation) {
        if (params.punchType) {
          const { code } = await addAttendance(params)
          if (code === 200) {
            uni.showToast({
              title: '自动打卡成功',
              icon: 'success',
              duration: 2000
            })
          }
        }
      } else {
        console.log('不在打卡范围内')
      }
    }
  } else if (
    dayjs().hour(13).minute(15).second(0).valueOf() < currentTime.valueOf() &&
    currentTime.valueOf() < dayjs(time3.value).valueOf()
  ) {
    listParams.punchType = '下午上班'
    params.punchType = '下午上班'
    if (attendanceRecordList.value.filter(v => v.punchType === '下午上班').length === 0) {
      if (isValidLocation) {
        if (params.punchType) {
          const { code } = await addAttendance(params)
          if (code === 200) {
            uni.showToast({
              title: '自动打卡成功',
              icon: 'success',
              duration: 2000
            })
          }
        }
      } else {
        console.log('不在打卡范围内')
      }
    }
  } else if (
    currentTime.valueOf() > dayjs(time4.value).valueOf() && currentTime.valueOf() < dayjs().endOf('day')
  ) {
    console.log('a',attendanceRecordList.value.filter(v => v.punchType === '下午下班'))
    listParams.punchType = '下午下班'
    params.punchType = '下午下班'
    if (attendanceRecordList.value.filter(v => v.punchType === '下午下班').length === 0) {
      if (isValidLocation) {
        if (params.punchType) {
          const { code } = await addAttendance(params)
          if (code === 200) {
            uni.showToast({
              title: '自动打卡成功',
              icon: 'success',
              duration: 2000
            })
          }
        }
      } else {
        console.log('不在打卡范围内')
      }
    }
  }
}
const getSelectApproveListFn = async () => {
  let res = await getSelectApproveList({
    status: '待办',
    pageNum: 1,
    pageSize: 10000
  })
  let res1 = await getSelectApproveList({
    status: '抄送我',
    pageNum: 1,
    pageSize: 10000
  })

  if (res.code === 200 && res1.code === 200) {
    // 新数据
    const daibanShu = res.rows.map((v) => v.id)
    const chaosongwoShu = res1.rows.map((v) => v.id)
    // 旧数据
    const num1 = uni.getStorageSync('daibanShu', daibanShu)
      ? uni.getStorageSync('daibanShu', daibanShu).map((v) => v.id)
      : []
    const num2 = uni.getStorageSync('chaosongwoShu', chaosongwoShu)
      ? uni.getStorageSync('chaosongwoShu', chaosongwoShu).map((v) => v.id)
      : []
    if (num1.length > 0 || num2.length > 0) {
      const countArr = findNewElements(daibanShu, num1)
      const countArr1 = findNewElements(chaosongwoShu, num2)
      cardData.value[1].num = countArr1.length + countArr.length
    } else {
      cardData.value[1].num = chaosongwoShu.length + daibanShu.length
    }
  }
}

onShow(async () => {
  await getUserProfileFn()
  await getSelectApproveListFn()
  // #ifdef APP-PLUS
  await getNewVersionApiFn()
  // #endif
  uni.getLocation({
    type: 'gcj02',
    geocode: true,
    isHighAccuracy: false, // 高精度定位，会调用gps获取高精度坐标
    success: function(res) {
      location.value.lat = res.latitude
      location.value.lng = res.longitude
      timeFn()
      getUserProfile().then((res) => {
        autoPunch(res.data)
      })
    }
  })
})
const getAppInfo = () => {
  return new Promise((resolve, reject) => {
    try {
      const systemInfo = uni.getSystemInfoSync() // 获取系统信息
      let appVersion = '未知' // 默认值
      // 判断平台
      if (systemInfo.platform === 'h5') {
        // H5 平台
        appVersion = systemInfo.appVersion || 'H5 无版本号'
      } else if (systemInfo.platform === 'android' || systemInfo.platform === 'ios') {
        if (typeof plus !== 'undefined') {
          appVersion = systemInfo.appWgtVersion || 'App 无版本号'
        }
      }
      // 返回结果
      resolve({
        platform: systemInfo.platform, // 平台信息（h5/android/ios）
        appVersion: appVersion, // 应用版本号
        os: systemInfo.osName || systemInfo.platform, // 操作系统（iOS/Android）
        osVersion: systemInfo.system, // 操作系统版本
        deviceModel: systemInfo.model || null // 设备型号
      })
    } catch (err) {
      reject('获取应用信息失败: ' + err.message)
    }
  })
}

// 跳转到浏览器页面
const openExternal = (url) => {
  if (url) {
    // 获取当前平台
    const platform = uni.getSystemInfoSync().platform
    if (platform === 'h5') {
      // H5 平台使用 window.open
      window.open(url)
    } else if (platform === 'android' || platform === 'ios') {
      // App 平台使用 plus.runtime.openURL
      if (typeof plus !== 'undefined') {
        plus.runtime.openURL(url, (err) => {
          if (err) {
            uni.showToast({
              title: '打开浏览器失败',
              icon: 'none'
            })
            console.error('打开浏览器失败:', err)
          }
        })
      } else {
        uni.showToast({
          title: '当前环境不支持跳转',
          icon: 'none'
        })
      }
    } else {
      uni.showToast({
        title: '当前平台不支持跳转浏览器',
        icon: 'none'
      })
    }
  } else {
    uni.showToast({
      title: 'URL 不能为空',
      icon: 'none'
    })
  }
}
// 调用
const getNewVersionApiFn = async () => {
  let { appVersion, os } = await getAppInfo()
  let params = {
    version: String(appVersion),
    type: os
  }
  if (os === 'android') {
    params.type = '1'
  } else if (os === 'ios') {
    params.type = '2'
  }
  // console.log(os, params, await getNewVersionApi(params))
  let { data, code } = await getNewVersionApi(params)
  if (code === 200) {
    if (data && data.isForceUpdate === 0) {
      uni.showModal({
        title: '检测到新版应用',
        content: os === 'ios' ? '请前往App Store搜索金圣龙ERP手动进行更新' : '是否立即更新?',
        success: (res) => {
          if (res.confirm) {
            if (os !== 'ios') {
              openExternal(data.url)
            } else {
              // 跳转ios appstore
              plus.runtime.openURL('https://apps.apple.com/us/app/金圣龙ERP/id6742095241')
            }
          }
        }
      })
    } else if (data && data.isForceUpdate === 1) {
      uni.showModal({
        title: '检测到新版应用',
        showCancel: false,
        content:
          os === 'ios' ? '请前往App Store搜索金圣龙ERP手动进行更新' : '版本更新内容重要立即更新！',
        success: (res) => {
          if (res.confirm) {
            if (os !== 'ios') {
              openExternal(data.url)
            } else {
              // 跳转ios appstore
              plus.runtime.openURL('https://apps.apple.com/us/app/金圣龙ERP/id6742095241')
            }
          }
        }
      })
    }
  }
}
onLoad(() => {
  uni.hideTabBar()
  //todo
  nextTick(() => {
    // #ifdef H5
    const systemInfo = uni.getSystemInfoSync()
    tabBarHeight.value = systemInfo.windowBottom

    // #endif
    // #ifdef APP-PLUS
    const systemInfo = uni.getSystemInfoSync()
    tabBarHeight.value = systemInfo.windowBottom
    // plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
    //   console.log('app版本号：' + widgetInfo.versionCode)
    //   console.log('app版本名：' + widgetInfo.version)
    //   console.log('plus.os.name：' + plus.os.name)
    //   if (widgetInfo.versionCode < 101) {
    //     console.log('111111111111111111111111111111111111')
    //     uni.showModal({
    //       title: '提示',
    //       content: '当前版本过低，请点击更新',
    //       showCancel: false,
    //       confirmText: '更新',
    //       success: function (res) {
    //         if (res.confirm) {
    //           console.log('用户点击确定')
    //         }
    //       },
    //     })
    //   } else if (plus.os.name === 'Android') {
    //     uni.showModal({
    //       title: '提示',
    //       content: '有新版本可用,是否更新?',
    //       icon: 'none',
    //       confirmText: '更新',
    //       cancelText: '取消',
    //       success: function (res) {
    //         if (res.confirm) {
    //           console.log('用户点击确定')
    //         }
    //       },
    //       fail: function (res) {
    //         console.log('fail')
    //       },
    //     })
    //   }
    //   // else if (plus.os.name === 'iOS') {
    //   //   uni.showToast({
    //   //     title: '题是ti',
    //   //     icon: 'none',
    //   //   })
    //   // }
    // })
    // #endif
  })
  // getNewVersionApiFn()
})
</script>

<style lang="scss" scoped>
@import '@/static/style/variables.scss';
@import '@/static/style/common.scss';

:deep(.uni-drawer__content) {
  width: 70% !important;
}

.setting-box {
  margin: 40rpx 32rpx 40rpx 32rpx;

  .cu-list {
    margin-top: 40rpx;

    .item-box {
      background-color: #f2f3f5 !important;
      border-radius: 0.25rem;
    }
  }

  :deep(.uni-card) {
    margin: 0 0 40rpx 0 !important;
    padding: 0 !important;

    .uni-card__header-avatar {
      border-radius: 50% !important;
      width: 112rpx !important;
      height: 112rpx !important;

      .uni-card__header-avatar-image {
        width: 100% !important;
        height: 100% !important;

      }
    }

    .uni-card__header,
    .uni-card__content {
      padding: 0 !important;
      border: none !important;
    }

    .uni-card__header-content-title {
      color: #1d2129;
      font-size: 36rpx !important;
      font-weight: 400;
    }
  }

  .uni-input {
    background: #f2f3f5;
    width: 100%;
    height: 66rpx;
    padding: 16rpx;
    align-items: center;
    border-radius: 8rpx;

    color: #86909c;
    font-size: 24rpx;
    font-weight: 400;
  }

  :deep(.uni-list) {
    .uni-list-item__container {
      padding: 64rpx 0 0 0 !important;
    }

    .uni-list-item__content-title {
      color: #1d2129;
      font-size: 32rpx;
      margin-left: 16rpx !important;
    }
  }
}

.home-content {
  box-sizing: border-box;
  background-color: $uni-bai;
  overflow-y: auto;

  :deep(.uni-swipe) {
    .topUpBtn {
      background: #007aff;
    }

    .deleteBtn {
      background: #dd524d;
    }

    .topUpBtn,
    .deleteBtn {
      @include flex($align: center, $flex-column: column);

      color: #fff;
      width: 160rpx;
      @include flex($align: center, $justify: center);
    }
  }

  .msg-list {
    @include flex($align: center, $justify: space-between);
    background-color: #fff;
    height: 124rpx;
    padding: 0 $spacing-row-base;

    &:active {
      background-color: #eff0f2;
    }

    .list-left {
      @include flex($align: center);

      image {
        width: 92rpx;
        height: 92rpx;
        margin-right: 16rpx;
      }

      .msg-type-author {
        @include flex($align: center);

        h4 {
          margin-right: 16rpx;
          color: #000000;
          font-family: 'PingFang SC';
          font-size: 32rpx;
          font-style: normal;
          font-weight: 400;
          line-height: 44.8rpx;
        }

        p {
          text-align: center;
          font-family: 'PingFang SC';
          font-size: 20rpx;
          font-style: normal;
          font-weight: 500;
          padding: 3rpx 8rpx;
          border-radius: 4rpx;
        }

        .机器人 {
          background: $warning-card-bg;
          color: $warning-card-text-color;
          font-weight: 500;
        }

        .绩效考核 {
          background: $success-card-bg;
          color: $success-card-text-color;
          font-weight: 500;
        }

        .应用 {
          background: $btn-bg;
          color: $btn-bg-color;
          font-weight: 500;
        }

        .金圣龙 {
          background: $btn-error-bg;
          color: $btn-error-color;
          font-weight: 500;
        }
      }

      text {
        align-self: stretch;
        color: #86909c;
        font-family: 'PingFang SC';
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 33.6rpx;
        margin-top: 8rpx;
      }
    }

    .time-txt {
      color: #86909c;
      text-align: right;
      font-family: 'PingFang SC';
      font-size: 28rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 39.2rpx;
    }
  }
}

.customNavBar {
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: $box-bg-color-white;
    box-sizing: border-box;

    .titleBar {
      padding: 0 $edition-pg;
      @include flex($align: center, $justify: space-between);

      .barLeft {
        @include flex($align: center, $justify: space-between);
      }

      .title {
        @include titleStyleBase;
      }
    }

    .icon-sousuo {
      font-size: 50rpx;
    }
  }
}

.square {
  border-radius: 8rpx;
}

:deep(.setting-box[data-v-02281a80] .uni-card .uni-card__header-avatar) {
  border-radius: 8rpx !important;
}
</style>
